<template>
     <Breadcrumb></Breadcrumb>
     
    <div class="addGoods">
        <el-row :gutter="20">
            <el-col :span="4">
                <div class="menu">
                    <div class="title">产品类型列表</div>
                    <div class="tree">
                        <GoodsTree @changeTree="changeTree"></GoodsTree>
                    </div>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="content">
                    <div class="subTitle">商品{{ goods.title }}</div>
                    <div class="wrapper">
                        <!-- 
                            el-form
                                :model="ruleForm" 表单数据 object
                                :rules="rules"    校验规则
                                ref="ruleForm"    获取组件from组件 dom 
                                label-width="100px" 标题占据宽度
                                size="small"     用于控制该表单内组件的尺寸	string	medium / small / mini
                            el-form-item
                                label="活动名称"   标题
                                prop="name"         字段标识--调用element-ui内置方法操作 必须写prop
                         -->
                        <el-form :model="goodsForm" :rules="rules" ref="ruleForm" label-width="100px" size="small"
                            class="demo-ruleForm">
                            <el-form-item label="所属分类" prop="category">
                                <span class="category"> {{ goodsForm.category }}</span>
                            </el-form-item>
                            <el-form-item label="商品名称" prop="title">
                                <el-input v-model="goodsForm.title"></el-input>
                            </el-form-item>
                            <el-form-item label="商品价格" prop="price">
                                <el-input v-model="goodsForm.price"></el-input>
                            </el-form-item>
                            <el-form-item label="商品数量" prop="num">
                                <el-input v-model="goodsForm.num"></el-input>
                            </el-form-item>
                            <el-form-item label="商品卖点" prop="sellPoint">
                                <el-input v-model="goodsForm.sellPoint"></el-input>
                            </el-form-item>
                            <el-form-item label="上传图片" prop="image">
                                <GoodsUpload @sendImage="sendImage" :fileList="fileList"></GoodsUpload>
                            </el-form-item>
                            <el-form-item label="商品描述" prop="descs">
                                <WangEditor @sendEditor="sendEditor" ref="myEditor"></WangEditor>
                                <!-- <WangEditor @sendEditor="sendEditor" :editorData="editor" ref="myEditor"></WangEditor> -->
                            </el-form-item>
                            <el-form-item label="首页轮播推荐" prop="isBanner">
                                <el-switch v-model="goodsForm.isBanner" active-color="#13ce66"></el-switch>
                            </el-form-item>
                            <el-form-item label="是否推荐商品" prop="recommend">
                                <el-switch v-model="goodsForm.recommend" active-color="#13ce66"></el-switch>
                            </el-form-item>
                            <el-form-item label="是否上架商品" prop="shelves">
                                <el-switch v-model="goodsForm.shelves" active-color="#13ce66"></el-switch>
                            </el-form-item>
                            <el-form-item>
                                <el-button v-show="title != '详情'" type="primary"
                                    @click="submitForm(ruleForm)">保存</el-button>
                                <el-button v-show="title != '详情'" @click="resetForm(ruleForm)">重置</el-button>
                                <el-button @click="goGoodsList()" type="info" plain>取消</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { reactive, ref, toRefs, h, nextTick } from "vue";
import { ElMessage, ElNotification } from 'element-plus'
import GoodsTree from './GoodsTree.vue'
import GoodsUpload from './GoodsUpload.vue'
import WangEditor from './WangEditor.vue'
import api from '@/api/index'
import { useRouter } from 'vue-router'
import { useGoodsStore } from '@/store/Goods'
const goods = useGoodsStore();
console.log('goodsgoodsgoods---', goods);
const router = useRouter()
//图片容器
const fileList = ref([])
const ruleForm = ref()
const myEditor = ref()
//表格容器
const goodsForm = reactive({
    cid: '',
    category: '',//分类
    title: '',//名称
    price: '',
    num: '',
    sellPoint: '',
    image: [],
    descs: '',
    isBanner: true,//轮推荐
    recommend: true,//推荐
    shelves: true,//商品上架
})

const rules = reactive({
    category: [
        { required: true, message: '请输入商品类目' }
    ],
    title: [
        { required: true, message: '请输入商品名称', trigger: 'blur' },
        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
    ],
    price: [
        { required: true, message: '请输入商品价格', trigger: 'blur' }
    ],
    num: [
        { required: true, message: '请输入商品数量', trigger: 'blur' }
    ],
    date1: [
        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
    ],
    date2: [
        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
    ],

})

//获取vuex里面数据
if (goods.title === '编辑') {
    console.log('goods.rowData---', goods.rowData);
    // goodsForm= goods.rowData
    Object.assign(goodsForm, goods.rowData)
    //获取images fileList=[{name:'',url:''}]
    let arr = JSON.parse(goods.rowData.image)
    console.log('arr-----', arr, typeof arr);
    goodsForm.image = arr;
    let img = []
    arr.forEach(ele => {
        let obj = {}
        obj.url = ele;
        img.push(obj)
    });
    fileList.value = img;
    //wangEditor数据
    nextTick(() => {
        console.log(' myEditor.value', myEditor.value);
        myEditor.value.setWangHtml(goods.rowData.descs)
    })
    console.log('-获取vuex里面数据-goodsForm--', goodsForm);
}

//接受tree点击的数据
const changeTree = (val) => {
    console.log('接受tree点击的数据', val);
    goodsForm.cid = val.cid
    goodsForm.category = val.name
}

//接受上传的图片----
const sendImage = (url) => {
    console.log('接受上传的图片----', url);
    goodsForm.image.push(url);
}

//接受wangEdiotr数据
const sendEditor = (val) => {
    console.log('接受wangEdiotr数据---', val);
    goodsForm.descs = val
}

//添加商品接口-----------------------------
const addGoods = async (params) => {
    let res = await api.addGoods(params)
    if (res.data.status === 200) {//添加成功--
        //信息提示
        //跳转到产品列表界面--- 
        router.push('/goods/list')
    } else {
        //错误信息提示
        ElMessage.error('错了哦，添加商品失败')
    }

}
//修改商品接口----------------------------------
const changeGoods = async (params) => {
    let res = await api.changeGoods(params)
    console.log('修改结果-----', res.data);
    if (res.data.status === 200) {//修改成功--
        //跳转到产品列表界面--- 
        router.push('/goods/list')
    } else {
        //错误信息提示
        // this.$message.error('错了哦，编辑商品失败');
    }
}
//保存------------------------------------------------
const submitForm = async formEl => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('获取表单的输入信息：----', goodsForm);
            //添加商品----参数： title cid  category sellPoint price num descs paramsInfo image
            let { id, title, cid, category, sellPoint, price, num, descs, image } = goodsForm;

            //判断按钮状态 添加 编辑
            if (goods.title === '添加') {
                addGoods({
                    title, cid, category, sellPoint, price, num, descs,
                    image: JSON.stringify(image)
                })
            } else {
                //编辑操作----------
                console.log('修改商品----image-----', image);
                changeGoods({
                    id, title, cid, category, sellPoint, price, num, descs, image: JSON.stringify(image)
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

//重置
const resetForm = (formEl) => {
    if (goods.title === '添加') {
        if (!formEl) return
        formEl.resetFields()
        //图片上传组件清空列表
        fileList.value = [];
        //wangEditor清空数据
        console.log('---myEditor---', myEditor);
        console.log('---myEditor---', myEditor.value);
        myEditor.value.clearWang();
    } else {
        //编辑重置---- 
        Object.assign(goodsForm, goods.rowData)
        //获取images fileList=[{name:'',url:''}]
        let arr = JSON.parse(goods.rowData.image)
        console.log('arr-----', arr, typeof arr);
        goodsForm.image = arr;
        let img = []
        arr.forEach(ele => {
            let obj = {}
            obj.url = ele;
            img.push(obj)
        });
        fileList.value = img;
        //wangEditor数据
        nextTick(() => {
            console.log(' myEditor.value', myEditor.value);
            myEditor.value.setWangHtml(goods.rowData.descs)
        })
    }

}
//取消
const goGoodsList = () => {
    router.push('/goods/list')
}



</script>

<style lang="less" scoped>
.addGoods {
    margin: 10px;
    // background: #fff;
    padding: 10px;
}

.menu {
    border: 1px solid #eee;
    height: 600px;
    background: #fff;

    .title {
        height: 50px;
        line-height: 50px;
        color: #fff;
        background: skyblue;
        padding-left: 10px;
        font-size: 14px;
    }

    .tree {
        padding: 20px;
    }
}

.content {
    min-height: 800px;
    background: #fff;
    font-size: 14px;

    .subTitle {
        background: #eee;
        color: #000;
        padding: 10px;
        font-weight: bold;
    }

    .wrapper {
        padding: 20px;
    }

    .category {
        color: skyblue;
        font-size: 16px;
    }
}
</style>